import numbro from 'numbro'
import VueHighcharts from 'vue2-highcharts'

// 首页极简折线图
export const lineOptions = {
  chart: {
    backgroundColor: null,
    borderWidth: 0,
    type: 'line',
    height: 60,
    margin: [2, 0, 2, 0],
    skipClone: true,
    style: {
      overview: 'visible'
    }
  },
  title: {
    text: ''
  },
  credits: {
    enabled: false
  },
  xAxis: {
    labels: {
      enabled: false
    },
    title: {
      text: null
    },
    startOnTick: false,
    endOnTick: false,
    tickPositions: [],
    visible: false
  },
  yAxis: {
    endOnTick: false,
    startOnTick: false,
    labels: {
      enabled: false
    },
    title: {
      text: null
    },
    tickPositions: [0],
    visible: false
  },
  legend: {
    enabled: false
  },
  tooltip: {
    backgroundColor: null,
    borderWidth: 0,
    shadow: false,
    hideDelay: 0,
    shared: true,
    padding: 0
  },
  plotOptions: {
    series: {
      animation: false,
      lineWidth: 1,
      states: {
        hover: {
          lineWidth: 1
        }
      },
      marker: {
        radius: 1,
        states: {
          hover: {
            radius: 1
          }
        }
      },
      fillOpacity: 0.25
    }
  }
}
// 首页面积图
export const areasOptions = {
  chart: {
    zoomType: 'xy',
    backgroundColor: 'transparent'
  },
  title: {
    text: ''
  },
  xAxis: [
    {
      categories: [],
      labels: {
        step: 3
      },
      tickLength: 0
    }
  ],
  yAxis: [
    {
      title: {
        text: '表数量增加',
        style: {
          color: '#000'
        }
      },
      labels: {
        style: {
          color: '#000'
        }
      },
      opposite: true
    },
    {
      labels: {
        style: {
          color: '#000'
        }
      },
      title: {
        text: '容量增加',
        style: {
          color: '#000'
        }
      }
    }
  ],
  tooltip: {
    shared: true,
    formatter: function () {
      let $x, $y0, $y1
      if (this.x) {
        $x = '<span>' + this.x + '</span>'
      }
      if (this.points[1]) {
        $y0 =
          '<br/><span>表数量增加: ' +
          numbro(this.points[0].y).format('0,00') +
          '</span>'
        $y1 =
          ' <br/><span>容量增加: ' +
          numbro(this.points[1].y).format('0.0b') +
          '</span>'
        return $x + $y0 + $y1
      } else {
        if (this.points[0].series.name === '表数量增加') {
          $y0 =
            '<br/><span>表数量增加: ' +
            numbro(this.points[0].y).format('0,00') +
            '</span>'
        } else {
          $y0 =
            '<br/><span>容量增加: ' +
            numbro(this.points[0].y).format('0.0b') +
            '</span>'
        }
        return $x + $y0
      }
      // let $x, $y0, $y1
      // if (this.x) {
      //   $x = '<span>' + this.x + '</span>'
      // }

      // if (this.points[0]) {
      //   $y0 =
      //     '<br/><span>新增表数量: ' +
      //     numbro(this.points[0].y).format('0,0') +
      //     '</span>'
      // }
      // if (this.points[1]) {
      //   $y1 =
      //     ' <br/><span>新增容量' +
      //     numbro(this.points[1].y).format('0.0b') +
      //     '</span>'
      // }
      // return $x + $y0 + $y1
    }
  },
  legend: {
    layout: 'vertical',
    align: 'left',
    x: 60,
    verticalAlign: 'top',
    y: -13,
    floating: true,
    backgroundColor: 'transparent'
  },
  plotOptions: {
    area: {
      fillOpacity: 0.4, // 指定所有面积图的透明度
      marker: {
        enabled: false,
        symbol: 'circle',
        radius: 2,
        states: {
          hover: {
            enabled: true
          }
        }
      }
    }
  },
  credits: {
    enabled: false
  },
  series: []
}
// export const areasOptions = {
//   chart: {
//     type: 'areaspline',
//     backgroundColor: 'transparent'
//   },
//   title: {
//     text: ''
//   },
//   legend: {
//     layout: 'vertical',
//     align: 'left',
//     squareSymbol: true,
//     verticalAlign: 'top',
//     x: 60,
//     y: -13,
//     floating: true,
//     backgroundColor: 'transparent'
//   },
//   xAxis: {
//     categories: [],
//     labels: {
//       step: 3
//     },
//     tickLength: 0
//   },
//   yAxis: {
//     title: {
//       text: ''
//     }
//   },
//   tooltip: {
//     shared: true,
//     formatter: function () {
//       let $x, $y0, $y1
//       if (this.x) {
//         $x = '<span>' + this.x + '</span>'
//       }
//       if (this.points[1]) {
//         $y0 =
//           '<br/><span>容量增加: ' +
//           numbro(this.points[0].y).format('0.0b') +
//           '</span>'
//         $y1 =
//           ' <br/><span>表数量增加: ' +
//           numbro(this.points[1].y).format('0,00') +
//           '</span>'
//         return $x + $y0 + $y1
//       } else {
//         if (this.points[0].series.name === '表数量增加') {
//           $y0 =
//             '<br/><span>表数量增加: ' +
//             numbro(this.points[0].y).format('0,00') +
//             '</span>'
//         } else {
//           $y0 =
//             '<br/><span>容量增加: ' +
//             numbro(this.points[0].y).format('0.0b') +
//             '</span>'
//         }
//         return $x + $y0
//       }
//     }
//   },
//   credits: {
//     enabled: false
//   },
//   plotOptions: {
//     areaspline: {
//       fillOpacity: 0.3
//     },
//     series: {
//       marker: {
//         radius: 1,
//         states: {
//           hover: {
//             radius: 1
//           }
//         }
//       }
//     }
//   },
//   series: []
// }
// 空心圆
export const pieOptions = {
  chart: {
    plotBackgroundColor: null,
    plotBorderWidth: null,
    plotShadow: false
  },
  title: {
    floating: true,
    text: ''
  },
  tooltip: {
    formatter: function () {
      let $x, $y0, $y1
      if (this.key) {
        $x = '<span>' + this.key + '</span>'
      }
      if (this.percentage) {
        $y0 =
          '<br/><span>百分比: ' +
          numbro(this.percentage).format('0.00') +
          '%</span>'
      }
      if (this.y) {
        $y1 = ' <br/><span>容量：' + numbro(this.y).format('0.0b') + '</span>'
      }
      return $x + $y0 + $y1
    }
  },
  plotOptions: {
    pie: {
      allowPointSelect: true,
      colors: [
        '#a3e1d4',
        '#dedede',
        '#9CC3DA',
        '#1c84c6',
        '#23c6c8',
        '#f8ac59'
      ],
      cursor: 'pointer',
      dataLabels: {
        enabled: false
      }
    }
  },
  credits: {
    enabled: false
  },
  series: []
}

export const pieOptions1 = {
  chart: {
    plotBackgroundColor: null,
    plotBorderWidth: null,
    plotShadow: false
  },
  title: {
    floating: true,
    text: ''
  },
  legend: {
    align: 'left',
    verticalAlign: 'top'
  },
  tooltip: {
    formatter: function () {
      let $x, $y0, $y1
      if (this.key) {
        $x = '<span>' + this.key + '</span>'
      }
      if (this.percentage) {
        $y0 =
          '<br/><span>百分比: ' +
          numbro(this.percentage).format('0.00') +
          '%</span>'
      }
      if (this.y) {
        $y1 = ' <br/><span>容量：' + numbro(this.y).format('0.0b') + '</span>'
      }
      return $x + $y0 + $y1
    }
  },
  plotOptions: {
    pie: {
      allowPointSelect: true,
      colors: [
        '#a3e1d4',
        '#dedede',
        '#9CC3DA',
        '#1c84c6',
        '#23c6c8',
        '#f8ac59'
      ],
      cursor: 'pointer',
      showInLegend: true,
      dataLabels: {
        enabled: true,
        format: '<b>{point.name}</b>: {point.percentage:.2f} %'
      }
    }
  },
  credits: {
    enabled: false
  },
  series: []
}

export const pieOptionsFormat = {
  chart: {
    plotBackgroundColor: null,
    plotBorderWidth: null,
    plotShadow: false
  },
  title: {
    floating: false,
    text: ''
  },
  legend: {
    align: 'left',
    verticalAlign: 'top'
  },
  tooltip: {
    formatter: function () {
      let $x, $y0, $y1
      if (this.key) {
        $x = '<span>' + this.key + '</span>'
      }
      if (this.percentage) {
        $y0 =
          '<br/><span>百分比: ' +
          numbro(this.percentage).format('0.00') +
          '%</span>'
      }
      if (this.y) {
        $y1 = ' <br/><span>个数：' + this.y + '</span>'
      }
      return $x + $y0 + $y1
    }
  },
  plotOptions: {
    pie: {
      allowPointSelect: true,
      colors: [
        '#a3e1d4',
        '#dedede',
        '#9CC3DA',
        '#1c84c6',
        '#23c6c8',
        '#f8ac59'
      ],
      cursor: 'pointer',
      showInLegend: true,
      dataLabels: {
        enabled: true,
        formatter: function () {
          let $x, $y0
          if (this.key) {
            $x = '<span>' + this.key + '</span>'
          }
          if (this.percentage) {
            $y0 =
              '<span> ' +
              numbro(this.percentage).format('0.00') +
              '%</span>'
          }
          return $x + $y0
        },
        style: {
          color: 'grep'
        }
      }
    }
  },
  credits: {
    enabled: false
  },
  series: []
}

export const pieOptionsFormatSize = {
  chart: {
    plotBackgroundColor: null,
    plotBorderWidth: null,
    plotShadow: false
  },
  title: {
    floating: false,
    text: ''
  },
  legend: {
    align: 'left',
    verticalAlign: 'top'
  },
  tooltip: {
    formatter: function () {
      let $x, $y0, $y1
      if (this.key) {
        $x = '<span>' + this.key + '</span>'
      }
      if (this.percentage) {
        $y0 =
          '<br/><span>百分比: ' +
          numbro(this.percentage).format('0.00') +
          '%</span>'
      }
      if (this.y) {
        $y1 = ' <br/><span>容量：' + numbro(this.y).format('0.0b') + '</span>'
        //   + numbro(this.y).format('0.0b') +
      }
      return $x + $y0 + $y1
    }
  },
  plotOptions: {
    pie: {
      allowPointSelect: true,
      colors: [
        '#a3e1d4',
        '#dedede',
        '#9CC3DA',
        '#1c84c6',
        '#23c6c8',
        '#f8ac59'
      ],
      cursor: 'pointer',
      showInLegend: true,
      dataLabels: {
        enabled: true,
        formatter: function () {
          let $x, $y0
          if (this.key) {
            $x = '<span>' + this.key + '</span>'
          }
          if (this.percentage) {
            $y0 =
              '<span> ' +
              numbro(this.percentage).format('0.00') +
              '%</span>'
          }
          return $x + $y0
        },
        style: {
          color: 'grep'
        }
      }
    }
  },
  credits: {
    enabled: false
  },
  series: []
}
//集群界面柱状图
export const barGraphOptions = {
  chart: {
    backgroundColor: null,
    type: 'column',
    marginRight: 10
  },
  title: {
    text: '集群任务趋势'
  },
  xAxis: [
    {
      categories: [],
      labels: {
        step: 3
      }
    }
  ],
  yAxis: {
    allowDecimals: false,
    min: 0,
    title: {
      text: '数量（个）'
    }
  },
  tooltip: {
    shared: true,
    formatter: function () {
      var s = '<b>' + this.x + '</b>';
      $.each(this.points, function () {
        s += '<br/>' + this.series.name + ': ' +
          this.y +'个';
      });
      return s;
    }
  },
  plotOptions: {
    column: {
      stacking: 'normal'
    }
  },
  series: [{
    name: '失败',
    data: [],
    color: '#ff4949',
    stack: 'male'
  }, {
    name: '成功',
    data: [],
    color: 'rgb(163, 225, 212)',
    stack: 'male'
  }],
  credits: {
    enabled: false
  },
  exporting: {
    enabled: false
  }
}

export const pieOptionsJobMapReduces = {
  chart: {
    plotBackgroundColor: null,
    plotBorderWidth: null,
    plotShadow: false
  },
  title: {
    text: 'Job任务占比'
  },
  tooltip: {
    headerFormat: '{series.name}<br>',
    pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
  },
  plotOptions: {
    pie: {
      allowPointSelect: true,
      cursor: 'pointer',
      dataLabels: {
        enabled: true,
        format: '<b>{point.name}</b>: {point.percentage:.1f} %'
      }
    }
  },
  series: [{
    type: 'pie',
    name: 'job个数',
    data: [
      {
        name: 'datacenter',
        y: 12.8,
        sliced: true,
        selected: true
      },
      ['gpadmin', 8.5],
      ['liul', 6.2],
      ['es', 0.7]
    ]
  }],
  credits: {
    enabled: false
  },
  exporting: {
    enabled: false
  }
}
export const pieOptionsJobNums = {
  chart: {
    plotBackgroundColor: null,
    plotBorderWidth: null,
    plotShadow: false
  },
  title: {
    text: 'Job任务占比'
  },
  tooltip: {
    headerFormat: '{series.name}<br>',
    pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
  },
  plotOptions: {
    pie: {
      allowPointSelect: true,
      cursor: 'pointer',
      dataLabels: {
        enabled: true,
        format: '<b>{point.name}</b>: {point.percentage:.1f} %'
      }
    }
  },
  series: [{
    type: 'pie',
    name: 'job个数',
    data: [
      {
        name: 'datacenter',
        y: 12.8,
        sliced: true,
        selected: true
      },
      ['gpadmin', 8.5],
      ['liul', 6.2],
      ['es', 0.7]
    ]
  }],
  credits: {
    enabled: false
  },
  exporting: {
    enabled: false
  }
}

export const solidgaugeMemoryOptions = {
  chart: {
    type: 'solidgauge'
  },
  title: null,
  pane: {
    center: ['50%', '85%'],
    size: '140%',
    startAngle: -90,
    endAngle: 90,
    background: {
      innerRadius: '60%',
      outerRadius: '100%',
      shape: 'arc'
    }
  },
  tooltip: {
    enabled: false
  },
  yAxis: {
    stops: [
      [0.1, '#55BF3B'], // green
      [0.5, '#DDDF0D'], // yellow
      [0.9, '#DF5353'] // red
    ],
    lineWidth: 0,
    minorTickInterval: null,
    tickPixelInterval: 400,
    tickWidth: 0,
    title: {
      y: -70
    },
    labels: {
      y: 16
    },
    min: 0,
    max: 6672384,
    title: {
      text: '内存'
    }
  },
  tooltip: {
    formatter: function () {
      return '<b>' + '<span>当前内存使用: ' +
        numbro(this.y*1024*1024).format('0.00b') +
        '</span></b><br/><b><span>总内存大小：6.36 TB</span></b>'
    }
  }, dataLabels: {
    enabled: true,
    format: '<b>{point.allocatedMB}</b>wert%'
  },
  series: [],
  plotOptions: {
    solidgauge: {
      dataLabels: {
        y: 50,
        borderWidth: 0,
        useHTML: true
      }
    }
  },
  credits: {
    enabled: false
  },
  exporting: {
    enabled: false
  }
}

export const solidgaugeCoresOptions = {
  chart: {
    type: 'solidgauge'
  },
  title: null,
  pane: {
    center: ['50%', '85%'],
    size: '140%',
    startAngle: -90,
    endAngle: 90,
    background: {
      innerRadius: '60%',
      outerRadius: '100%',
      shape: 'arc'
    }
  },
  tooltip: {
    enabled: false
  },
  yAxis: {
    stops: [
      [0.1, '#55BF3B'], // green
      [0.5, '#DDDF0D'], // yellow
      [0.9, '#DF5353'] // red
    ],
    lineWidth: 0,
    minorTickInterval: null,
    tickPixelInterval: 400,
    tickWidth: 0,
    title: {
      y: -70
    },
    labels: {
      y: 16
    },
    min: 0,
    max: 1908,
    title: {
      text: 'Vcores'
    }
  },
  tooltip: {
    formatter: function () {
      return '<b>' + '<span>当前Vcores使用: ' +this.y+

        '</span></b><br/><b><span>总Vcores大小：1908</span></b>'
    }
  },dataLabels: {
    enabled: true,
    format: '<b>{point.allocatedMB}</b>wert%'
  },
  series: [

  ],
  plotOptions: {
    solidgauge: {
      dataLabels: {
        y: 50,
        borderWidth: 0,
        useHTML: true
      }
    }
  },
  credits: {
    enabled: false
  },
  exporting: {
    enabled: false
  }

  /*credits: {
    enabled: false
  },
  series: [{
    name: '内存容量',
    data: [80],
    dataLabels: {
      format: '<div style="text-align:center"><span style="font-size:25px;color:' +
      ((VueHighcharts.theme && VueHighcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' +
      '<span style="font-size:12px;color:silver">Gib</span></div>'
    },
    tooltip: {
      valueSuffix: ' 容量'
    }
  }]*/
}

// export const s = () => {
//   setInterval(function () {
//     var point,
//       newVal,
//       inc;
//     if (chart1) {
//       point = chart1.series[0].points[0];
//       inc = Math.round((Math.random() - 0.5) * 100);
//       newVal = point.y + inc;
//       if (newVal < 0 || newVal > 200) {
//         newVal = point.y - inc;
//       }
//       point.update(newVal);
//     }
//     if (chart2) {
//       point = chart2.series[0].points[0];
//       inc = Math.random() - 0.5;
//       newVal = point.y + inc;
//       if (newVal < 0 || newVal > 5) {
//         newVal = point.y - inc;
//       }
//       point.update(newVal);
//     }
//   }, 2000);
// }

//表历史详情大小折线图

export const tableSizeOptions = {
  chart: {
    backgroundColor: null,
    type: 'line',
    showAxes: false
  },
  title: {
    text: '每日新增容量大小分布'
  },
  xAxis: [
    {
      categories: [],
      labels: {
        step: 4
      },
      tickLength: 10
    }
  ],
  yAxis: {
    allowDecimals: false,
    title: {
      text: '每日增长表大小'
    },
    labels: {
      formatter:function(){
        return numbro(this.value).format('0.b');
      }
    }
  },
  tooltip: {
    formatter: function () {

      return '<b>' + this.x + '</b><br/>' +
        '<br/><span>表容量增加: ' +
      numbro(this.y).format('0.00b') +
      '</span>'
    }
  },
  series: [],
  credits: {
    enabled: false
  },
  exporting: {
    enabled: false
  }
}


//实时表详情大小折线图

export const realTimeTableSizeOptions = {
  chart: {
    backgroundColor: null,
    type: 'line'
  },
  title: {
    text: '当日新增容量大小分布'
  },
  xAxis: [
    {
      categories: [],
      labels: {
        step: 2
      },
      tickLength: 10
    }
  ],
  yAxis: {
    allowDecimals: false,
    title: {
      text: '当日增长表大小'
    },
    labels: {
      formatter:function(){
        return numbro(this.value).format('0.b');
      }
    }
  },
  tooltip: {
    shared: true,
    formatter: function () {
      var s = '<b>' + this.x + '</b>';
      $.each(this.points, function () {
        s += '<br/>' + this.series.name + ': ' +
          numbro(this.y).format('0.00b');
      });
      return s;
    }
  },
  series: [],
  credits: {
    enabled: false
  },
  exporting: {
    enabled: false
  }
}

//presto集群任务图
export const barGraphClusterCapacityOptions = {
  chart: {
    backgroundColor: null,
    type: 'column',
    marginRight: 10
  },
  title: {
    text: '集群容量分布'
  },
  xAxis: [
    {
      categories: [],
      labels: {
        step: 3
      }
    }
  ],
  yAxis: {
    allowDecimals: false,
    // floor: Math.max(...this.y),
    min: 0,
    title: {
      text: '容量'
    }
  },
  tooltip: {
    shared: true,
    formatter: function () {
      var s = '<b>' + this.x + '</b>';
      $.each(this.points, function () {
        s += '<br/>' + this.series.name + ': ' +
          numbro(this.y).format('0.00b');
      });
      return s;
    }
  },
  plotOptions: {
    column: {
      stacking: 'normal'
    }
  },
  series: [{
    name: '失败',
    data: [],
    color: '#ff4949',
    stack: 'male'
  }, {
    name: '成功',
    data: [],
    color: 'rgb(163, 225, 212)',
    stack: 'male'
  }],
  credits: {
    enabled: false
  },
  exporting: {
    enabled: false
  }
}
